
"use client"
import React, { useState } from 'react';
import { Button, DatePicker, Divider, Input, Menu, Select, Space, Table, Tag } from 'antd';
import type { MenuProps, TableProps } from 'antd';
import { useRouter } from 'next/navigation';
import {
  CheckCircleFilled,
  EditFilled,
  VerticalAlignTopOutlined,
  DeleteFilled,
  SearchOutlined,
  RedoOutlined,
  ZoomInOutlined
} from '@ant-design/icons';
import { log } from 'console';

// import Breadcrumb from '../../../../../component/mbx';

import dayjs from 'dayjs';

type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
interface DataType {
  id: number
  title: string,
  name: string,
  stage: string,
  total: number,
  price: number,
  time: number,
  day: number
}
const columns: TableProps<DataType>['columns'] = [
  {
    title: '商机标题',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '关联客服',
    dataIndex: 'name',
  },
  {
    title: '商业阶段',
    dataIndex: 'stage',
  },
  {
    title: '播报记录',
    dataIndex: 'total',
  },
  {
    title: '报价总金额',
    dataIndex: 'price',

  },

  {
    title: '最后跟进',
    dataIndex: 'time',
    render: (time) => {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
  },
  {
    title: '未跟进天数',
    dataIndex: 'day',
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <a><CheckCircleFilled />跟进</a>
        <a><EditFilled />编辑</a>
        <a><VerticalAlignTopOutlined />置顶</a>
        <a><DeleteFilled />删除</a>
      </Space>
    ),
  },
];
//表格数据
const data: DataType[] = [
  {
    "id": 1,
    "title": "商机标题",
    "name": "深圳市忆恩科技有限公司",
    "stage": "初步洽谈",
    "total": 8,
    "price": 8000,
    "time": 1678875600000,
    "day": 15
  },
  {
    "id": 2,
    "title": "商机标题2",
    "name": "深圳市创新未来科技有限公司",
    "stage": "深入沟通",
    "total": 12,
    "price": 12000,
    "time": 1661087400000,
    "day": 20
  },
  {
    "id": 3,
    "title": "合作机会探索",
    "name": "广州智远信息科技有限公司",
    "stage": "方案制定",
    "total": 6,
    "price": 7000,
    "time": 1636372200000,
    "day": 35
  },
  {
    "id": 4,
    "title": "潜在业务拓展",
    "name": "杭州星耀网络科技有限公司",
    "stage": "合同协商",
    "total": 18,
    "price": 18000,
    "time": 1715346900000,
    "day": 25
  },
  {
    "id": 5,
    "title": "新市场商机",
    "name": "上海卓越创新技术有限公司",
    "stage": "意向确认",
    "total": 10,
    "price": 10000,
    "time": 1686570900000,
    "day": 40
  },
  {
    "id": 6,
    "title": "技术合作商机",
    "name": "深圳市忆恩科技有限公司",
    "stage": "需求评估",
    "total": 15,
    "price": 15000,
    "time": 1649127900000,
    "day": 18
  },
  {
    "id": 7,
    "title": "产品推广商机",
    "name": "深圳市创新未来科技有限公司",
    "stage": "报价阶段",
    "total": 9,
    "price": 9000,
    "time": 1632321300000,
    "day": 30
  },
  {
    "id": 8,
    "title": "客户合作商机",
    "name": "广州智远信息科技有限公司",
    "stage": "合作签约",
    "total": 14,
    "price": 14000,
    "time": 1745390967028,
    "day": 22
  },
  {
    "id": 9,
    "title": "项目开发商机",
    "name": "杭州星耀网络科技有限公司",
    "stage": "项目启动",
    "total": 7,
    "price": 7500,
    "time": 1649127900000,
    "day": 45
  },
  {
    "id": 10,
    "title": "业务增长机遇",
    "name": "上海卓越创新技术有限公司",
    "stage": "后期跟进",
    "total": 16,
    "price": 16000,
    "time": 1691019600000,
    "day": 12
  },

]

//三级导航数据
type MenuItem = Required<MenuProps>['items'][number];

const items: MenuItem[] = [
  {
    key: '/lxt',
    label: (
      <Button >
        全部商机
      </Button>
    ),
  },
  {
    key: '/lxt/sj/wdsj',
    label: (
      <Button>
        我的商机
      </Button>
    ),
  },
  {
    key: '/lxt/sj/xssj',
    label: (
      <Button>
        下属商机
      </Button>
    ),
  },
  {
    key: '/lxt/sj/wxzd',
    label: (
      <Button>
        我协作的
      </Button>
    ),
  },
  {
    key: '/lxt/sj/xsxz',
    label: (
      <Button>
        下属协作
      </Button>
    )
  },
  {
    key: '/lxt/sj/cjsj',
    label: (
      <Button>
        成交商机
      </Button>
    ),
  }
];

const App: React.FC = () => {
  const router = useRouter()
  const [current, setCurrent] = useState('mail');

  const onClick: MenuProps['onClick'] = (e) => {
    setCurrent(e.key);
    router.push(e.key)
  };
  //多选
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    // console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,

    ]
  };
  return (
    <>
      {/* <Breadcrumb /> */}
      <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
      <Divider />
      <div>
        <Space>

          <Input placeholder="搜索关键词" />
          <Select
            placeholder=" 订单阶段"
            style={{ width: 150 }}
            options={[
              { value: '初步洽谈', label: '初步洽谈' },
            ]}
          />
          <Select
            placeholder=" 订单来源"
            style={{ width: 150 }}
            options={[
              { value: '1', label: '1' },
            ]}
          />
          <Select
            placeholder="成交机率"
            style={{ width: 150 }}
            options={[
              { value: '1', label: '1' },
            ]}
          />
          <DatePicker placeholder='预计签单日期' />
          <Button type="primary"><SearchOutlined />查询</Button>
          <Button><RedoOutlined />重置</Button>
          <Button style={{ color: 'rgb(0,121,254)' }}><ZoomInOutlined />高级搜索</Button>
        </Space>

        <Divider />
      </div>
      <Table<DataType> rowSelection={rowSelection} bordered columns={columns} dataSource={data} pagination={{ defaultPageSize: 8 }} />
    </>
  )

};

export default App;